<template>
	<el-dialog title="人员选择" :visible.sync="showDialog" append-to-body  @close="onCancel">
		<el-form class="search-bar" :inline="true" :model="filter" ref="filter">
		    <el-form-item label="姓名" prop="name">
		        <el-input v-model="filter.name" placeholder="请输入姓名" clearable >
					<span slot="suffix"  class=" el-icon-search" @click="getUserList(1,true)"></span>
				</el-input>
		    </el-form-item>
		</el-form>
		<div class="checked-list">
			<div class="label">已选择:</div>
			<div class="users" @wheel="mouseWheel" ref="users">
				<span class="user" v-for="(user,index) in allchecked" :key="index" v-show="index<=6">
					<span class="uname" >{{user.name}}</span>
					<i class="el-icon-close"  @click="deleteUser(user)"></i>
				</span>
				<i class="user el-icon-more" v-show="allchecked.length>=6" @click="showCheckedDialog=true" title="查看更多"></i>
			</div>
			<span v-if="allchecked.length>limit" style="color: #ffa500;" class="el-icon-warning">不应超过{{limit}}人!</span>
		</div>
	   <el-table :data="curList.data" ref="userList" @select-all="onSelectAll"   @select="onSelect">
	       <el-table-column type="selection"  align="center"  width="50"></el-table-column>
	       <el-table-column type="index" label="序号" align="center" prop="index" width="60px" >
	           <div slot-scope="scope">
	               {{(curList.pageNum - 1) * curList.pageSize + 1 + scope.$index }}
	           </div>
	       </el-table-column>
	       <el-table-column label="姓名" prop="name" align="center" width="">
	           <slot slot-scope="scope">
	               <span :title="scope.row.name">{{scope.row.name}}</span>
	           </slot>
	       </el-table-column>
	       <el-table-column label="电话" prop="phone" align="center" width="">
	           <slot slot-scope="scope">
	               <span :title="scope.row.phone">{{scope.row.phone}}</span>
	           </slot>
	       </el-table-column>
	       <el-table-column label="状态" prop="statusName" align="center" width="">
	           <slot slot-scope="scope">
	               <span :title="scope.row.statusName">{{scope.row.statusName}}</span>
	           </slot>
	       </el-table-column>
	   </el-table>
	   <el-pagination layout="prev, pager, next"
	       :current-page="userList.pageNum"
	       :page-size="userList.pageSize"
	       :total="userList.total"
	       @current-change="getUserList"
	       @prev-click="getUserList"
	       @next-click="getUserList"
	   ></el-pagination>
	    <div slot="footer" align="center">
	        <el-button size="mini" @click="onCancel">取 消</el-button>
	        <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
	    </div>
		<el-dialog class="checked-dialog" title="已选人员" :visible.sync="showCheckedDialog" append-to-body width="500px">
		    <span class="user" v-for="(user,index) in allchecked" :key="index">
		    	<span class="uname" >{{user.name}}</span>
		    	<i class="el-icon-close"  @click="deleteUser(user)"></i>
		    </span>
		</el-dialog>
	</el-dialog>
</template>
<script>
	export default{
		props:{
			initData:{
				type:[String,Array],
				default:()=>[]
			},
			isRadio:{
				type:Boolean,
				default:false
			},
			limit:{
				type:[Number,String],
				default:999999999
			},
		},
		data(){
			return{
				filter: {
				    name:'',
				},
				userList:{
				    pageNum:1,//页码
				    pageSize:15,
				    total:5,//总共条数
				    data:[],
					checked:[]
				},
				searchList:{
				    pageNum:1,//页码
				    pageSize:15,
				    total:5,//总共条数
				    data:[],
					checked:[]
				},
				showDialog:false,
				showCheckedDialog:false,
				searchMode:false,
				allchecked:[]
				
			}
		},
		watch:{
			'filter.name'(val){
				if(val==""){
					this.searchMode=false
					this.$nextTick(()=>{
						let ids=this.allchecked.map((item)=>{
							return item.id
						})
						this.setChecked(ids,true)
					})
					//this.getUserList(1)
				}
			},
			showDialog(vv){
				if(vv){
					this.$refs.userList && this.$refs.userList.clearSelection()
					if(typeof this.initData=='string'){
						if(this.initData==""){
							this.allchecked=[]
							this.$refs.userList && this.$refs.userList.clearSelection()
							return
						}
						this.allchecked=this.initData.split(",").map((item)=>{
							return {name:item}
						})
						
					}else if(Array.isArray(this.initData)){
						this.allchecked=this.initData;
					}
					this.$nextTick(()=>{
						let ids=this.allchecked.map((item)=>{
							return item.id
						})
						this.setChecked(ids,true)
					})
				}else{
					this.filter.name=""
				}
				
			}
		},
		computed:{
			curList(){
				return this.searchMode ? this.searchList : this.userList;
			},
		},
		methods:{
			//search是否搜索
			getUserList(pageNum,search){
			    var submitData={
			        current:typeof pageNum=='number' ? pageNum : this.curList.pageNum,
			        size:this.curList.pageSize,
			        ...this.filter,
			    };

			    this.$http.getUserList(submitData)
			    .then((res)=>{
			        var res=res.data.data;
			        if(!res){
			            return
			        }
					res.records=res.records.filter((item)=>{
						return item.status==1;
					})
					this.searchMode=!!search;
			        this.$set(this.curList,'pageNum',res.current);
			        this.$set(this.curList,'pageSize',res.size);
			        this.$set(this.curList,'total',res.total);
			        this.$set(this.curList,'data',res.records)
					
					this.$nextTick(()=>{
						let ids=this.allchecked.map((item)=>{
							return item.id
						})
						this.setChecked(ids,true)
					})
					
			    }).catch((err)=>{
			        throw(err)
			    })
			    this.$store.commit('setUserDetail',null)
			},

			//全选
			onSelectAll(selection){
				if(this.isRadio && selection.length>1){
					this.$message.warning("仅支持单选!")
					this.$refs.userList.clearSelection()
					selection=[]
				}
				
				if(selection.length==0){
					let removeIds=this.curList.data.map((item)=>{
						return item.id;
					})
					this.allchecked=this.allchecked.filter((item)=>{
						return !(removeIds.indexOf(item.id)!=-1);
					})
				}else{
					let ids=this.allchecked.map((item)=>{
						return item.id;
					})
					selection.forEach((row)=>{
						if(ids.indexOf(row.id)==-1){
							this.allchecked.push(row)
						}
					})
				}
				
			},
			//选择
			onSelect(selection,row){
				if(this.isRadio && selection.length>1){
					this.$message.warning("仅支持单选!")
					this.$refs.userList.clearSelection()
					selection=[]
				}
				
				//是选中还是撤销
				var bool=selection.some((item)=>{
					return item.id==row.id
				})
				if(bool){
					//是否已经存在
					let has=this.allchecked.some((item)=>{
						return item.id==row.id
					})
					if(!has){
						this.allchecked.push(row)
					}
				}else{
					this.allchecked=this.allchecked.filter((item)=>{
						return item.id!=row.id;
					})
				}
			},
			
			//设置指定行选中||取消选中
			setChecked(idList,bool){
				if(!this.$refs.userList){return}
				this.curList.data.forEach((row)=>{
					if(idList.indexOf(row.id)!=-1){
						this.$refs.userList.toggleRowSelection(row,bool)
					}else{
						this.$refs.userList.toggleRowSelection(row,!bool)
					}
				})
			},

			onCancel(){
				//this.$refs.userList.clearSelection()
				this.showDialog=false
			},

			onConfirm(){
				if(this.allchecked.length > this.limit){
					this.$message.warning(`不应超过${this.limit}人!`)
					return
				}
				this.$emit("output",this.allchecked)
				this.showDialog=false
			},

			mouseWheel(ev){
				var users = this.$refs.users;
				let left = users.scrollLeft;
				if (ev.wheelDelta) { //谷歌
				  if (ev.wheelDelta < 0) { //当滑轮向上滚动时
				    users.scrollLeft = left - 50 < 0 ? 0 : left - 50;
				  } else if (ev.wheelDelta > 0) {
				    users.scrollLeft = left + 50;
				  }
				}
			},

			deleteUser(user){
				// this.$refs.userList.toggleRowSelection(user,false);
				this.allchecked=this.allchecked.filter((item)=>{
					if(user.id){
						return item.id!=user.id; 
					}else{
						return item.name!=user.name;
					}
				})
				
				this.$nextTick(()=>{
					let ids=this.allchecked.map((item)=>{
						return item.id
					})
					this.setChecked(ids,true)
				})
				
			}

		},

		created() {
			this.getUserList()
		}
	}
</script>
<style scoped="scoped" lang="scss">
.checked-list{
	display: flex;
	align-items: center;
	height: 33px;
	.label{
		font-weight: bolder;
		margin-right: 10px;
	}
	.users{
		flex:1;
		display: flex;
		overflow: auto;
		.user{
			background-color: #f1f1f1;
			border-radius: 5px;
			padding: 2px 5px;
			margin-right: 10px;
			flex-shrink: 0;
			cursor: default;
		}
		.el-icon-close{
			background-color: #ff8100;
			color: #fff;
			padding: 2px;
			border-radius: 50%;
			margin-left: 10px;
			cursor: pointer;
		}
		.el-icon-more{
			line-height: 23px;
			cursor: pointer;
			&:hover{
				color: #ffaa40;
				font-weight: bolder;
			}
		}
		&::-webkit-scrollbar {
		  display: none;
		}
		.uname{
			max-width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
			vertical-align: middle;
		}
	}
}

/deep/ .el-input{
	.el-input__suffix{
		cursor: pointer;
		padding: 0px 10px;
		pointer-events: auto;
	}
}

/deep/ .el-table{
	overflow: auto;
}
/deep/ .el-pagination{
	margin-bottom: -10px;
}

/deep/ .el-dialog{
	.el-dialog__footer{
		position: static;
	}
}

</style>
<style lang="scss">

.checked-dialog{
	/deep/ .el-dialog .el-dialog__body{
		flex:1;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-content: flex-start;
		overflow: auto;
		.user{
			background-color: #f1f1f1;
			border-radius: 5px;
			padding: 2px 5px;
			margin-right: 20px;
			margin-bottom: 10px;
			flex-shrink: 0;
			cursor: default;
		}
		.el-icon-close{
			background-color: #ff8100;
			color: #fff;
			padding: 2px;
			border-radius: 50%;
			margin-left: 10px;
			cursor: pointer;
		}
		.el-icon-more{
			line-height: 23px;
			cursor: pointer;
			&:hover{
				color: #ffaa40;
				font-weight: bolder;
			}
		}
		&::-webkit-scrollbar {
		  display: none;
		}
		.uname{
			max-width: 150px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			display: inline-block;
			vertical-align: middle;
		}
	}
}	
</style>
